<template>

      <el-dialog title="选择关联邮件附带信息" :visible.sync="dialogVisible" :close-on-click-modal="false" width="60%" append-to-body>

      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-width="auto" label-position="left" size="mini" :inline="true">

          <el-form-item label="tel">
            <el-input placeholder="" v-model="mainQuery.tel" @keyup.enter.native="handleSearch" clearable></el-input>
          </el-form-item>
          <el-form-item label="fax">
            <el-input placeholder="" v-model="mainQuery.fax" @keyup.enter.native="handleSearch" clearable></el-input>
          </el-form-item>
          <el-form-item label="email">
            <el-input placeholder="" v-model="mainQuery.email" @keyup.enter.native="handleSearch" clearable></el-input>
          </el-form-item>
          <el-form-item label="replyEmail">
            <el-input placeholder="" v-model="mainQuery.replyEmail" @keyup.enter.native="handleSearch" clearable></el-input>
          </el-form-item>
          <el-form-item label="helpWebsite">
            <el-input placeholder="" v-model="mainQuery.helpWebsite" @keyup.enter.native="handleSearch" clearable></el-input>
          </el-form-item>
          <el-form-item label="website">
            <el-input placeholder="" v-model="mainQuery.website" @keyup.enter.native="handleSearch" clearable></el-input>
          </el-form-item>

          <el-form-item label="状态" size="mini">
            <el-select v-model="mainQuery.status" placeholder="所有" clearable>
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

      </el-form>

      <div class="search-btn-box">
        <div class="left">
        </div>
        <div class="right">
          <el-button class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading" size="mini">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch" :loading="mainTable.loading" size="mini">查询</el-button>
        </div>
      </div>

      <!--主列表数据-->
      <d2-crud
        ref="d2Crud"
        :options="mainTable.options"
        :index-row="mainTable.indexRow"
        :columns="mainTable.columns"
        :data="mainTable.list"
        :selection-row="mainTable.allowSelect"
        :loading="mainTable.loading"
        @current-change="onMainCurrentChange"
        @row-dblclick="onMainDoubleClick"
        @selection-change=""
      ></d2-crud>

      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        >
      </el-pagination>

      <template slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">取 消</el-button>
        <el-button @click="submit" size="mini" type="primary" :loading="loading" :disabled="!mainTable.current">选 择</el-button>
      </template>
    </el-dialog>

</template>

<script>

import util from '@/libs/util';
import ApiMain from '@/api/email.subInfo';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      statusOptions: util.tool.getStatusOptions(),

      dialogVisible   : false,
      popDeleteVisible: false,
      loading         : false,

      mainQueryRaw: null,
      mainQuery: {
        tel  : '',
        fax  : '',
        email  : '',
        replyEmail  : '',
        helpWebsite  : '',
        website  : '',
        status: '',
      },

      mainTable: {
        loading: false,
        options: {
          border             : true,
          stripe             : true,
          highlightCurrentRow: true,
          emptyText          : '暂无数据',
          size               : 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          {title: 'id', key: 'id', align: 'center', showOverflowTooltip: true},
          {title: 'tel', key: 'tel', align: 'center', showOverflowTooltip: true},
          {title: 'fax', key: 'fax', align: 'center', showOverflowTooltip: true},
          {title: 'email', key: 'email', align: 'center', showOverflowTooltip: true},
          {title: 'replyEmail', key: 'replyEmail', align: 'center', showOverflowTooltip: true},
          {title: 'helpWebsite', key: 'helpWebsite', align: 'center', showOverflowTooltip: true},
          {title: 'website', key: 'website', align: 'center', showOverflowTooltip: true},
          {title: '状态', key: 'strStatus', align: 'center', showOverflowTooltip: true},
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize   : 50,
          total      : 0,
          pageSizes  : [50, 100, 200]
        },
        current: null,
      },

      id  : null,
      data: null,
    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    handleSearch () {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },
    handleMainSizeChange (val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange (val) {
      this.mainTable.pagination.page = val;
      this.fetchMainData()
    },
    onMainCurrentChange (now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick (now) {
      this.mainTable.current = now;
      this.submit();
    },

    show (id = null) {

      this.fetchMainData();
      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.id   = null;
      this.data = null;

      this.emailSubInfoList = [];
    },

    async fetchMainData () {

      this.mainTable.loading = true;

      try {
      } catch (err) {}

      this.mainTable.loading = false;
    },

    buildMainQuery () {

      var query = {
        page  : this.mainTable.pagination.currentPage,
        limit : this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData () {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    renderMainData (re) {

      re.list.forEach(item => {

        var statusItem = this.statusOptions.find(v => v.value == item.status);
        item.strStatus = statusItem ? statusItem.label : '-';
      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    async submit () {
      this.$emit("on-select", this.mainTable.current);
      this.close();
    },
  }
}
</script>

<style>

</style>
